<%--
  Created by IntelliJ IDEA.
  User: aaa
  Date: 2024/6/22
  Time: 15:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录</title>
</head>
<style>

    .form-container {
        border: 2px solid black;
        padding: 10px;
        width: 350px;
        background-color: #fff;
        border-radius: 5px;
    }

    input:hover {
        background-color: lightcyan;
    }
    .error {
        color: red;
    }
</style>
</head>
<body>
<div class="container">
<h2 align="center">学生作业管理系统</h2>
<center>
    <div class="form-container">
        <!--定义表单-->
        <form action="LoginServlet" method="post" onsubmit="return validateForm()">
            <table align="center">
                <tr>
                    <td>账户：</td>
                    <td>
                        <input type="text" id="userAccount" name="userAccount" placeholder="请输入账户" required onblur="validateUsername()">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <span id="errorUserAccount" class="error"></span>
                    </td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td>
                        <input type="password" id="password" name="passWord" placeholder="请输入密码" required onblur="validatePassword()">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <span id="errorPassword" class="error"></span>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center" ><input type="submit" id="login" value="登录"> <%--<input type="submit" id="regist" value="注册">--%></td>

                </tr>
            </table>
        </form>
    </div>
</center>
</div>
</body>
<script>
    //检查用户账户是否正确
    function validateUsername() {
        //获取用户账户的值
        var userAccount = document.getElementById('userAccount').value;
        //获取显示错误信息的元素
        var errorUserAccount = document.getElementById('errorUserAccount');
        //判断用户账户的大小
        if (userAccount.length < 3) {
            //小于3,则设置错误信息的提示
            errorUserAccount.textContent = '用户名至少3个字符';
            //返回false
            return false;
        } else {
            //大于3则设置错误信息为空
            errorUserAccount.textContent = '';
            //放回true
            return true;
        }
    }
//检查用户密码是否正确
    function validatePassword() {
        var password = document.getElementById('password').value;
        var errorPassword = document.getElementById('errorPassword');
        if (password.length < 1) {
            errorPassword.textContent = '密码至少1个字符';
            return false;
        } else {
            errorPassword.textContent = '';
            return true;
        }
    }
//账户和密码同时校验成功才可以登录成功
    function validateForm() {
        return validateUsername() && validatePassword();
    }
</script>
</html>
